<template>
  <el-dialog :title="props.title+' - '+(outBtn?( outBtn.event=='add()'?'添加':'编辑'):'')" :visible.sync="show" width="35%" @close="closeDialog">
    <el-form :model="submit" status-icon :label-width="props.labelWidth?props.labelWidth:'80px'" ref="form">
      <el-form-item :label="item.name" :key="index" :prop="item.prop"  v-for="(item,index) of props.addItems" :rules="item.required?{ required: true, message: '不能为空', trigger: 'blur' }:null">
        <el-select v-if="item.type=='select'" v-model="submit[item.prop]" placeholder="请选择">
          <el-option v-for="(item,index) of item.options" :label="item.label" :value="item.value" :key="index"></el-option>
        </el-select>
        <el-input  v-if="item.type=='text' || item.type=='textarea'" autocomplete="off" v-model="submit[item.prop]" :type="item.type"></el-input>
        <input v-if="item.type=='imgSelect'" v-model="submit[item.prop]" type="hidden"/>
        <el-button v-if="item.type=='imgSelect'" size="mini" @click="item.click"> 图标全选</el-button>
        <img v-if="item.type=='imgSelect'" :src="'/static/img/'+item.folder+'/'+submit[item.prop]" style="height: 20px"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
      props:{
          props:Object,
          outBtn:Object,
          originalData:Object,
          submitUrl:String,
          editUrl:String
      },
      data() {
          return{
              submit:{},
              show:false,
          }
      },
      methods:{
          closed() {
              console.log("colsed")
          },
          closeDialog() {
              this.$emit("closeDialog",{})
          },
          handleSubmit() {
              let url = this.outBtn==this.$config.BTNS.EDIT?this.editUrl:this.submitUrl
              this.$refs['form'].validate((valid) => {
                  if (valid) {
                      this.$http.post(url,this.submit).then(resp=>{
                          this.$message.success("保存成功！")
                          this.$emit("refresh")
                          this.closeDialog()
                      },msg=>{})
                  } else {
                      this.$message.error("字段不能为空")
                  }
              })
          },
          setDValue() {
              for (let i=0;i<this.props.addItems.length;i++) {
                  if (this.props.addItems[i].dValue && !this.submit[this.props.addItems[i].prop]) {
                      this.submit[this.props.addItems[i].prop] = this.props.addItems[i].dValue
                  }
              }
          }
      },
      created() {

      },
      watch:{
          outBtn(newVal,oldVal) {
              this.show = (newVal==this.$config.BTNS.ADD || newVal == this.$config.BTNS.EDIT)
          },
          originalData(newVal,oldVal) {
              this.$nextTick(()=>{
                  this.submit = newVal?newVal:{}
                  this.setDValue()
              })
          }
      }
  }
</script>

<style lang="less" scoped>
  /deep/.el-dialog__header{
    padding: 10px;
    background: #d51900;
  }
  /deep/.el-dialog__headerbtn{
    top:10px;
    right:10px;
    i{
      color: white !important;
    }
  }

  /deep/.el-form-item__label,/deep/.el-form-item__content{
    line-height: unset;
    font-size: 9pt;
    color: black;
  }

  /deep/.el-dialog__title{
    color: white;
    font-size: 14px;
    font-weight: bold;
  }

  /deep/.el-dialog__body{
    padding: 10px 20px;
  }

  /deep/.el-input__inner{
    height: 24px;
    line-height: 24px;
    border-radius: 0;
  }

  .el-form-item {
    margin-bottom: 15px;
  }

  /deep/.el-input__icon{
    line-height: 25px;
  }

  /deep/.el-form-item__error{
    padding: 0px;
  }

</style>
